<template>
	<view>
		<view class="bc-navbar">
			<navbar title='我的帖子' :is-child="true" />
		</view>
		<view>
			<view class="content" :style="'height:' + listHeight + 'px'">
				<scroll-view :scroll-y="true" @scrolltolower='loadMore'
					:style="'height:' + listHeight + 'px'"
					:refresher-enabled="enabledRefresher" :refresher-triggered="triggered"  
					refresher-background="#FFF" :refresher-threshold="100" 
				>
					<view style="padding-bottom: 8rpx;">
						<view style="width: 750rpx;height: 25rpx;background-color: #f8f8f8;"></view>
						<view v-if="postingList.length != 0">
							<post-item v-for="(item,index) in postingList" :key="item.id" :posting="item"></post-item>
							<view>
								<u-loadmore :status="loadingStatus"
										:loading-text="loadingText" 
										:loadmore-text="loadmoreText" 
										:nomore-text="nomoreText" 
										line 
										lineColor="#d3dbe5"
										color="#6b6b6b"
								 />
							</view>
						</view>
						<view v-else style="padding-top: 80rpx; padding-bottom: 10rpx;">
							<view v-if="isLoading">
								<loading></loading>
							</view>
							<view v-else>
								<u-empty
									mode="list"
									text="空空如也~"
								></u-empty>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/navbar/navbar.vue'
	import postItem from '@/components/post-item/post-item.vue'
	import loading from '@/components/loading/loading.vue'
	import store from '@/store/index.js'
	
	import { listPosting } from '@/apis/posting.js'
	
	export default {
		components: {
			navbar,
			postItem,
			loading
		},
		data() {
			return {
				// 加载更多
				isLoading: false, 
				loadingStatus: "loadmore",
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '没有更多了~',
				// 高度
				listHeight: 0,
				// 业务数据
				postingList: [],
				postingCount: -1,
				// 查询条件
				queryPosting: {
					pageNum: 1,
					pageSize: 10,
					orderByColumn: 'createTime',
					isAsc: 'desc',
					userId: this.$store.state.user.userId,
				},
			}
		},
		methods: {
			/** 查询帖子 **/
			doListPosting() {
				let _this = this;
				_this.isLoading = true;
				_this.postingList = [];
				_this.queryPosting.pageNum = 1;
				listPosting(_this.queryPosting).then( res => {
					_this.postingList = res.rows;
					_this.postingCount  = res.total;
					if (res.total <= 10) {
						_this.loadingStatus = "nomore";
					}
				}).finally(r => {
					_this.isLoading = false
				})
			},
			/** 修改搜索内容 **/
			changeSearch() {
				this.doListPosting();
			},
			/** 加载更多帖子 **/
			loadMore() {
				let _this = this;
				if (_this.postingCount != -1 &&  _this.queryPosting.pageNum * _this.queryPosting.pageSize >= _this.postingCount) {
					_this.loadingStatus = "nomore";
					return;
				}
				_this.loadingStatus = "loading";
				_this.queryPosting.pageNum = _this.queryPosting.pageNum + 1;
				listPosting(_this.queryPosting).then( res => {
					_this.postingList = [..._this.postingList,...res.rows];
					_this.postingCount  = res.total;
				}).finally(r => {
					_this.loadingStatus = "loadmore";
				})
			},
			/** 设置看列表高度**/
			async setListHeight() {
				let that = this;
				// 页面高度
				let sysInfo = uni.getSystemInfoSync();
				let winHeight = sysInfo.windowHeight;
				// header 高度
				let headerHeight = 0;
				let headerView = uni.createSelectorQuery().select(".bc-navbar");
				headerView.boundingClientRect(data=>{
					headerHeight = data.height;
				}).exec(function(res) {
					that.listHeight = winHeight - headerHeight;
				});
			},
		},
		onReady() {
			this.setListHeight();
		},
		onLoad() {
			let _this = this;
			_this.doListPosting();
		},
	}
</script>

<style>

	.content {
		margin: 0 15rpx;
	}

</style>
